<template>
  <div>
    <el-input v-model="name" placeholder></el-input>
    <el-form ref="form" :model="testForm" label-width="80px">
      <el-form-item label="性别">
        <el-radio-group v-model="testForm.sex">
          <el-radio label="1">男</el-radio>
          <el-radio label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input-number v-model="testForm.age"></el-input-number>
      </el-form-item>
      <el-form-item label="颜色">
        <el-input v-model="testForm.color" v-focus ></el-input>
        <!-- <input type="text" v-focus> -->
      </el-form-item>
      <div class="footer">
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </el-form>
    <div>{{msg}}{{sexTxt}}</div>
    <transition name="fade">
        <div :key="testForm.color">颜色：{{colorTxt}}</div>
    </transition>
    <p v-setColor="'red'">数量肯德基</p>
    <p v-setHtml></p>
    <!-- <input type="text" v-focus> -->
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  computed,
  watchEffect,
  watch,
  onMounted,
  Directive
} from "vue";
export default defineComponent({
  directives: {
    focus: {
      mounted: function(el,binding) {
        el.querySelector(".el-input__inner").focus()
      },
    },
    setColor:{
        mounted:function(el,binding){
            el.style.color = binding.value
            console.log(binding)
        }
    },
    setHtml:(el,binding)=>{
        el.innerHTML = "111111"
    }
  },
  setup() {
    //变量名要语义化，不能使用保留字段，否则会卡
    const name = ref("小明");
    const testForm = reactive({
      sex: "1",
      age: 18,
      color: ""
    });
    const submit = () => {
    //   console.log(this);
    //   console.log(testForm);
    };

    const msg = computed(() => {
      return `我的名字是${name.value},性别是${
        testForm.sex == "1" ? "男" : "女"
      },年龄是${testForm.age},喜欢的颜色是${testForm.color}`;
    });
    const myComputed = computed({
      get() {
        return testForm.age + 1;
      },
      set(val) {}
    });
    const sexTxt = ref("");
    watch(
      testForm,
      ({ sex, age, color }) => {
        sexTxt.value = sex == "1" ? "男" : "女";
      },
      { immediate: true, deep: true }
    );
    const colorTxt = ref("");
    onMounted(() => {
    //   console.log(this);
    });

    // let num = 1;
    // setInterval(()=>{
    //     num++
    //     console.log(num)
    // },100)
    watchEffect(() => {
      colorTxt.value =
        testForm.color == "red"
          ? "红色"
          : testForm.color == "blue"
          ? "蓝色"
          : "不知道什么色";
    });
    return {
      name,
      testForm,
      submit,
      msg,
      sexTxt,
      colorTxt
    };
  }
});
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>